<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="50%" draggable>
    <el-tabs v-model="activeName" class="demo-tabs hd">
      <el-tab-pane label="个人信息" name="user">
        <el-form ref="userFormRef" :rules="rules" :model="dialogData.itemInfo" label-width="100px" label-suffix=" :">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-row>
                <el-col>
                  <el-form-item label="姓名" prop="name">
                    <el-input
                      v-model="dialogData.itemInfo.name"
                      placeholder="请填写用户姓名"
                      maxlength="5"
                      show-word-limit
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="帐号" prop="account">
                    <el-input v-model="dialogData.itemInfo.account" placeholder="请填写登录帐号" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="性别">
                    <el-radio-group v-model="dialogData.itemInfo.gender">
                      <el-radio v-for="item in genderType" :label="item.value" :key="item.value">
                        {{ item.label }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="手机号">
                    <el-input v-model="dialogData.itemInfo.phone" placeholder="请填写手机号" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="邮箱">
                    <el-input v-model="dialogData.itemInfo.email" placeholder="请填写邮箱" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="身份证号">
                    <el-input v-model="dialogData.itemInfo.idCard" placeholder="请填写身份证号" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <UploadImg v-model:imageUrl="dialogData.itemInfo.avator" :file-size="2" width="200px" height="200px">
                  <template #tip> 头像,不超过2M </template>
                </UploadImg>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="handleSubmit" :loading="btnLoading">保存</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="用户认证" name="identity">
        <div class="identity-box">
          <el-alert :title="idenfityTitle" :type="idenfityType" show-icon :closable="false" />
          <el-alert
            title="审核时长一般2小时内完成，涉及政企签名一般2个工作日内完成，近期平均完成审核时长约1小时，如遇升级核验、审核任务较多、非工作时间，审核时间可能会延长，请耐心等待。审核工作时间：周一至周日9：00-23：00（法定节假日顺延）"
            :closable="false"
          ></el-alert>
          <div class="img-box">
            <div class="left-box">
              <UploadImg
                v-model:imageUrl="dialogData.itemInfo.idFront"
                :file-size="2"
                width="300px"
                height="180px"
                :api="uploadUserId"
              >
                <template #tip> 请上传清晰的个人身份证正面,不超过2M </template>
              </UploadImg>
            </div>
            <div class="right-box">
              <UploadImg
                v-model:imageUrl="dialogData.itemInfo.idBack"
                :file-size="2"
                width="300px"
                height="180px"
                :api="uploadUserId"
              >
                <template #tip> 请上传清晰的个人身份证背面,不超过2M </template>
              </UploadImg>
            </div>
          </div>
          <div class="opt-box">
            <el-button type="primary" @click="handleUserIdentity" :loading="btnLoading">上传用户认证信息</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer"> </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { UserInfoEntity } from "@/biz/interface/modules/UserType";
import { computed, reactive, ref } from "vue";
import { genderType } from "@/biz/datas/sysData";
import { ElMessage, FormInstance } from "element-plus";
import { getCurUserInfoApi, handleUserIdentityApi, saveUserInfoApi } from "@/api/modules/sys/user";
import { uploadUserId } from "@/api/modules/upload";
import UploadImg from "@/components/Upload/Img.vue";
import { useAppStore } from "@/stores/modules/app";

const appStore = useAppStore();
//页面的数据
interface UserDialogOption extends DialogParam {
  //当前的数据对象
  itemInfo: UserInfoEntity;
}

const activeName = ref("user");

const idenfityTitle = computed(() => (dialogData.itemInfo.flagIdentity == "Y" ? "已认证" : "未认证"));

const idenfityType = computed(() => (dialogData.itemInfo.flagIdentity == "Y" ? "success" : "error"));

//提交按钮，避免多次提交
const btnLoading = ref(false);
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.EDIT,
  itemInfo: {
    account: "",
    name: "",
    gender: 1,
    phone: "",
    idCard: "",
    email: "",
    avator: "",
    flagIdentity: "",
    idFront: "",
    idBack: ""
  }
});

//提交用户身份审核信息
const handleUserIdentity = async () => {
  if (dialogData.itemInfo && dialogData.itemInfo.id) {
    let res = await handleUserIdentityApi({ ...dialogData.itemInfo });
    console.log("提交用户审核结果", res);
  }
};

const userFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  userFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      if (dialogData.optType === OptEnum.CREATE || dialogData.optType === OptEnum.EDIT) {
        //密码要加密一下。
        let res = await saveUserInfoApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({
            message: `${dialogData.itemInfo.name}用户成功！`
          });
          appStore.setUserName(dialogData.itemInfo.name);
          //刷新列表数据
          dialogVisible.value = false;
        }
      }
    } catch (error) {
      // console.log(error);
    } finally {
      btnLoading.value = false;
    }
  });
};

const rules = reactive({
  name: [{ required: true, message: "请填写用户名称", trigger: "blur" }],
  account: [{ required: true, message: "请填写帐号", trigger: "blur" }]
});

// openDialog
const openDialog = () => {
  dialogVisible.value = true;
  //获取当前登录用户的信息
  getCurUserInfoApi({}).then(res => {
    dialogData.itemInfo = res.data as unknown as UserInfoEntity;
  });
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.identity-box {
  .img-box {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left-box {
      width: 50%;
      display: flex;
      justify-content: center;
    }

    .right-box {
      display: flex;
      justify-content: center;
      width: 50%;
      margin-left: 10px;
    }
  }

  .opt-box {
    .el-button {
      // margin-left: 20px;
    }
  }
}
</style>
